/* ############################################### */
/* ########### mobile                  ########### */
/* ############################################### */

/* ############################################### */
/* ########### max 1024px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 1024px) {

/*
HIER ANSETZEN !!!
#top_out
,#navigation_out{
position:relative !important;
}
*/ 

#content .csc-default
,#content .csc-textpic-text{
margin-right: 0px;
}
#content .csc-default{
padding-bottom: 17px;
}
#navigation #projectlogo{
width: 206px;
left:12px;
}
#twocols div.csc-default, #twocols div.csc-textpic{
display: block;
}
#top_out
,#navigation_out{
position:absolute !important;
    /* Bug in some mobile systems, workarround */
   /* -webkit-transform: translate3d(0,0,0);
     -webkit-backface-visibility: hidden;
     */
}
#header_out .imagecycle-caption{
display: none;	
}
#header_out .tx-imagecycle-pi1-pager{
display: none !important;	
}
.tx-imagecycle-pi1{
width: auto !important;	
overflow: hidden;
}
#top{
padding-right: 7px;
}
#breadcrumbs {
    position: absolute;
    padding-right: 7px;
    top: 30px;
    text-align:right;
    width:auto;
    right: 7px;
}
#bottom_newsletter
,#bottom_news
,#bottom_social{
width: 100%;
}
#bottom{
padding-left: 0px;
padding-bottom:23px;
}
#bottom_newsletter input[type="text"]{
width: 100%;
}
#bottom_news
,#bottom_social{
padding-top: 12px;
margin-left: 0px;
}
#bottom_social{
padding-top: 23px;
display:none;
}
.tx-sremailsubscribe-pi1 dd {
    width: 99%;
}
.tx-sremailsubscribe-pi1 dd  input{
    padding-right: 0px;
}
.tx-sremailsubscribe-pi1 dd:nth-last-child(1){
    float: right;
    margin-top: -32px;
    width: 77px;
    text-align:right;
}
.tx-sremailsubscribe-pi1 input[type="submit"]{
margin-left:0px;
width: 99% !important;
}
#bottom_newsletter input[type="submit"]
,#bottom_newsletter input[type="text"]{
height: 26px !important;
}
#bottom_newsletter input[type="text"]{
width: 99% !important;
}
#progtext{
padding-right: 8px;
}
#maincol
,#rightcol{
width: 100%;
}
#rightcol{
padding-top: 13px;
}
#header.clearfix .csc-default{
width: 33.5%;
max-width:200px;
}
#header_project, #header_patient, #header_investor{
height: 270px;
}
div#rightcol .csc-default{
width: 246px;
float: left;
margin-right: 11px;
}
#content_out #content #maincol div.csc-default
,#content_out #content #maincol div.csc-default .csc-textpic-text{
padding-right: 0px;
margin-right: 0px;
}
#content_out #content #maincol div.csc-default{
margin-right: 1px;
}

#twocols {
    /*-moz-column-     count: 1;
    -moz-column-     gap: 4em;
    */
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */	

    -webkit-column-gap: 100%; /* Chrome, Safari, Opera */
    -moz-column-gap: 100%; /* Firefox */
}
 
    /* RAD: match those 2 lines for polyfill https://github.com/BetleyWhitehorne/CSS3MultiColumn START */
	/* "Limitations (as of version 1.0beta)
Values for column-       width and column-      gap must be given in pixels. 
You must include column-      count and use long-hand syntax. 
The implementation relies on a light javascript css parsers. 
Avoid complex css structures (like cascading rules)."*/
#twocols {
    column-count: 1;
	column-gap: 20px;
}
/*column     -gap: 100%;*/
	/* RAD: match those 2 lines for polyfill https://github.com/BetleyWhitehorne/CSS3MultiColumn END */

}
/* ############################################### */
/* ########### max 1024px   E N D      ########### */
/* ############################################### */





/* ############################################### */
/* ########### max 1000px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 1000px) {

/* RAD 2014-10-29: PRONIA-134 Mobile Version - Darstellung Buttons auf Bestätigungsseite anpassen START */
.tx-sremailsubscribe-pi1 dd:nth-last-child(1){
    clear: both;
    float: left;
    margin-top: 1px;
	width: auto;
}
/* RAD: what should this empty <dt> do? hide it?!? @ http://www.pronia.eu/newsletter/, ... */
.tx-sremailsubscribe-pi1 dt{
padding-bottom: 0;
width: auto;
} 

/* RAD 2014-10-29: PRONIA-134 Mobile Version - Darstellung Buttons auf Bestätigungsseite anpassen END */

#content
,#bottom{
/* fro 15.01.2015 - fuer was ein padding? */
padding-left: 13px;
padding-right: 13px;
}


}

/* ############################################### */
/* ########### max 1000px   E N D      ########### */
/* ############################################### */




/* ############################################### */
/* ########### max 850px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 850px) {

.headerimg1
,.headerimg3{
display:none;
}
.headerimg2{
display: block;
}
#header{
margin-top: -23.3em !important;
}
}

/* ############################################### */
/* ########### max 850px   E N D      ########### */
/* ############################################### */




/* ############################################### */
/* ########### max 750px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 750px) {

#maincol  img
,#maincol .csc-textpic-imagewrap
{
max-width: 100% !important;

}
#maincol .csc-textpic-image table
,#maincol .csc-textpic-image table img{
max-width: 100% !important;
}
#maincol .csc-textpic-imagewrap
,#maincol .csc-textpic-image table
,#maincol .csc-textpic-image table img
{
width: 100% !important;
height: auto;
}

img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}


#navigation_out {
    height: 120px;
}
#searchicon{
padding-top: 88px !important;
}
#mainmenu{
padding-top: 30px;
}
#header_out{
padding-top: 30px;
}
#navigation #projectlogo {
    position: absolute;
}
#header > div[id^="header_"], #header_project, #header_patient, #header_investor {
    width: 50%;
}
#header #header_investor {
    margin-left: 50%;
}
#header.clearfix .csc-default{
width: 50%;
max-width:200px;
}
#header_project, #header_patient, #header_investor{
height: 270px;
}
#header_out{
padding-top: 30px;
}
#mainmenu nav ul.level1 li ul.level2 li ul.level3{
right: -205px !important;
}
#mainmenu nav ul.level1 li ul.level2 li ul.level3 {
    border-left: 5px solid transparent !important;
}

}

/* ############################################### */
/* ########### max 750px   E N D      ########### */
/* ############################################### */



/* ############################################### */
/* ########### max 700px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 700px) {

div.tx-powermail{
width: 100%;
}

}

/* ############################################### */
/* ########### max 700px   E N D      ########### */
/* ############################################### */






/* ############################################### */
/* ########### min 601px   S T A R T  ########### */
/* ############################################### */

/* RAD: for mobile slicknav.js menu */
/* @media screen and (min-width: 601px) START */
@media screen and (min-width: 601px) {

body.slicknav #navigation #searchicon {
    float: right !important;
	margin-right: 10px;
    padding-top: 58px !important;
}

body.slicknav #navigation #projectlogo {
    position: relative !important;
    top: -77px !important;
}





body.slicknav #navigation #mainmenu {
    position: relative !important;
    top: -69px;
}


body.slicknav #navigation #breadcrumbs {
    position: relative !important;
    top: -69px;
}


}

/* @media screen and (min-width: 601px) END */

/* ############################################### */
/* ########### min 601############################### */
/* ############################################### */



/* ############################################### */
/* ########### max 600px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 600px) {
#header3img .csc-textpic-center-outer
,#header3img .csc-textpic-center-inner{
float: none;
/* RAD 2015-05-15: invalid CSS - intent unknown */
/*right: none;*/
}
#footer{
    padding-bottom: 60px;
}
#progtext{
padding:0;
margin-top: 50px;
position: absolute;
}

/* RAD: PRONIA-138 iOS 6.1.6 - Pronia.eu -> Project -> Bild falsch angezeigt START */

/*table @ http://www.pronia.eu/the-project/ */
table img[width='450']{
	table-layout:fixed;
	display:block;
/*	max-width:100%;*/
	min-width:320px!important;
}
/* RAD: PRONIA-138 iOS 6.1.6 - Pronia.eu -> Project -> Bild falsch angezeigt END */

ul.level1{
display: none!important;
}

body.mobile #header_out {
margin-top: 146px;
}

/* TESTPHASE UMSETZUNG  mobiles Menu*/
#bottom_out #service{
display: block;
}
div#bottom_out div#service {
background-color: #ffffff;
padding-right: 7px;
text-align: right;
}
div#bottom_out div#service div#service_menu div.csc-textpic-center-outer
,div#bottom_out div#service div#service_menu div.csc-textpic-center-outer .csc-textpic-center-inner {
right: 0;
}
div#bottom_out div#service div#service_menu div.csc-textpic-center-outer .csc-textpic-imagerow{
float: left;
}
div#bottom_out div#service div#service_menu div.csc-textpic-center-outer .csc-textpic-imagerow-last{
padding-left: 11px;
}

.csc-textpic-image.csc-textpic-last img{
width: 100%;
max-width: 100%;
height: auto;
}
/*
#navigation #projectlogo{
top: 33px;
}
#mainmenu, #header_out{
padding-top: 47px;
}
#searchicon {
    padding-top: 101px !important;
}
*/
.headerimg1
,.headerimg2{
display:none;
}
.headerimg3{
display: block !important;
}

#header_out div#headerimg.clearfix.headerimg3 div.csc-textpic-imagewrap
,#header_out div#header2img.clearfix.headerimg3 div.csc-textpic-imagewrap
,#header_out div#header3img.clearfix.headerimg3 div.csc-textpic-imagewrap{
float:none;
}
.headerimg3 img{
height: auto !important;

width: 100% !important;
}
div#header_out div#headerimg div.csc-textpic-center-outer
,div#header_out div#headerimg div.csc-textpic-center-inner
,div#header_out div#headerimg div.csc-textpic-image
,div#header_out div#header2img div.csc-textpic-center-outer
,div#header_out div#header2img div.csc-textpic-center-inner
,div#header_out div#header2img div.csc-textpic-image
,div#header_out div#header3img div.csc-textpic-center-outer
,div#header_out div#header3img div.csc-textpic-center-inner
,div#header_out div#header3img div.csc-textpic-image{
/*right: 0;
left: 0;*/
}
#header_out
,#headerimg{
/*width:100%;*/
}

#headerimg
,#header2img
,#header3img
,#header{
min-height: 89px !important;
}

#header_out{
background-color: #ffffff;
}
#header{
height:auto;
min-height: auto;
}

#maincol table, td{
display: block;
width: 100%; 
}
#maincol table { 
  border-collapse: collapse; 
}
#maincol td{
 position: relative;
}
#header > div[id^="header_"], #header_project, #header_patient, #header_investor {
    width: 50%;
}
#header > div[id^="header_"]{
    display: none;
}

#header.clearfix .csc-default{
width: 100%;
}
#header_project, #header_patient, #header_investor{
height: 270px;
}
#header .csc-default{
display: none;
}
#navigation_out{
top: 1.9em !important;
}
#navigation_out {
    height: 120px;
}
#headerimg
,#header2img
,#header3img{
margin-top: 13px;
}
#header_out{
padding-top: 17px;
}
#top_out
,#navigation_out{
position:absolute !important;
    /* Bug in some mobile systems, workarround */
   /* -webkit-transform: translate3d(0,0,0);
     -webkit-backface-visibility: hidden;
     */
}
div#header_out div#header{
display: none;
}

/* RAD: for slicknav.js START */
#searchicon{
padding-top: 0!important;
position: absolute !important;
right: 12px;
top: 48px;
}

#navigation #projectlogo {

margin-top: 8px;
padding-top: 0;
position: relative;
}

#mainmenu{
margin-top: 5px;
padding-top: 0;
}

#searchbox{
/* RAD: override js style attr */
margin-left: 0!important;
}

#searchbox {
background: none repeat scroll 0 0 #3E5AA8;
/*
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
background: none repeat scroll 0 0 rgba(62, 90, 168, 0.5);
}


#mainmenu nav ul.level1 > li
,#navigation > div
,#breadcrumbs
,#searchbox{
clear:both;
height:auto;
float:none;
position:static;
margin-left:0;
text-align:left
}
#mainmenu nav ul.level1 > li > a
,#navigation > div > a
,#breadcrumbs > a
,#searchbox > a{
height:auto;
}

#mainmenu ul.slicknav_nav > li {
	margin: 0;
}

#navigation_out {
    height: auto!important;
	background-color: #ffffff;
    background-color: rgba(255,255,255,0.80);
}

/* RAD: for slicknav.js END */



}

/* ############################################### */
/* ########### max 600px   E N D      ########### */
/* ############################################### */














/* ############################################### */
/* ########### max 500px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 500px) {

#breadcrumbs {
background-color: #ffffff;
padding-bottom: 12px;
padding-right: 7px;
right: 0px;
}
#navigation_out{
top: 3.6em !important;
}
#breadcrumbs{
top: 30px;
padding-top: 2px;
line-height: 1em;
}
#header_out{
padding-top: 30px;
}
#headerimg
,#header2img
,#header3img{
margin-top: 28px;
}
}

/* ############################################### */
/* ########### max 500px   E N D      ########### */
/* ############################################### */



/* ############################################### */
/* ########### max 450px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 450px) {


#header > div[id^="header_"], #header_project, #header_patient, #header_investor {
    width: 100%;
}
#header.clearfix .csc-default{
width: 100%;

}
#header_project, #header_patient, #header_investor{
height: 270px;
margin-left: 0px !important;
}
.powermail_captchaimage
,.powermail_captcha_outer
,.powermail_field{
width: 100% !important;
}
.powermail_field_securitycode{
/*width: 99% !important;*/
}

}

/* ############################################### */
/* ########### max 450px   E N D      ########### */
/* ############################################### */









/* ############################################### */
/* ########### max 350px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 350px) {

#navigation_out{
height: 150px;
}
#topmenu {
    top: 0;
    position: absolute;
    padding-left: 12px;

    margin-right: 44px;
}
#top_out{
height: 3.6em;
}
/* RAD: no margin-top
#breadcrumbs{
margin-top: 30px;
}
*/
#header_out{
padding-top: 60px;
}
#projectlogo{
padding-top: 30px;
}
#top_out{
  background: none;
  background-color: rgb(0, 16, 117);
  border-bottom: 1px solid #404c98;
}
#header > div[id^="header_"], #header_project, #header_patient, #header_investor {
    width: 100%;
}
#header.clearfix .csc-default{
width: 100%;
}
#header_project, #header_patient, #header_investor{
height: 270px;
margin-left: 0px !important;
}
#homepage img{
width: 100%;
max-width: 100%;
height: auto;
}
}

/* ############################################### */
/* ########### max 350px   E N D      ########### */
/* ############################################### */






/* ############################################### */
/* ########### max 320px   S T A R T  ########### */
/* ############################################### */
@media screen and (max-width: 320px) {

div#content div#homepage a img#img_project
,div#content div#homepage a img#img_patient
,div#content div#homepage a img#img_investor{
margin-left: 0px;
}




}

/* ############################################### */
/* ########### max 320px   E N D      ########### */
/* ############################################### */